@import "../../base/_base";

.team{
  text-align: left;
  .user_task{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding-right: 10px;
    .noted{
      min-width:235px;
      width: 235px;
      height: 270px;
      display: inline-block;
      position: relative;
      margin-bottom: 2px;
      padding: .1rem;
      cursor:pointer;
      border-radius: 10px;
      &:hover{
        opacity:1;
      }
      &:hover .noted-title{
        background-color: rgba(0 ,0,0,0.3);
        background-color: #0B6E48;
      }
      img{
        width: 100%;
        height: 100%;
      }
      .img{
        width: 120px;
        height: 120px;
        border-radius: 60px;
        position: absolute;
        z-index: 10;
        background-color: rgba(0 ,0,0,0.3);
        top:10%;
        left:50%;
        -webkit-transform:translatex(-50%);
        transform:translatex(-50%);
        background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493010993473&di=caeac3cffe012e8b55f68deb3faa5c4e&imgtype=0&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201212%2F28%2F135109w3brbtcbkbk3tlvw.jpg) no-repeat;
        background-size: 100% 100%;
      }
      .noted-title{
        font-family: "Hiragino Sans GB", "STHeiti", Helvetica, "Microsoft Yahei", 微软雅黑, Arial, "Lucida Grande", sans-serif;
        color:#fff;
        font-size:.2rem;
        width: 80%;
        padding: 0;
        position: absolute;
        z-index: 10;
        background-color: rgba(0 ,0,0,0.3);
        top:60%;
        left:50%;
        -webkit-transform:translatex(-50%);
        transform:translatex(-50%);
        text-align: center;
      }
      .yan{
        position: absolute;
        z-index: 10;
        background-color: rgba(0 ,0,0,0.3);
        bottom:50px;
        right:.2rem;
        color: #f0efee;
        -webkit-transform:translatex(-50%);
        transform:translate(-50%);
        &:hover ~ .note-content{
          display: block;
          position: absolute;
          width: 100%;
          height: 100%;
          padding: 20px;
          z-index: 11;
          top:50%;
          left:50%;
          -webkit-transform:translate(-50%,-50%);
          transform:translate(-50%,-50%);
        }
      }
      .note-content{
        display: none;
        transition: all 1s linear;
        background-color: rgba(255,255,255,0.8);
        color: #080808;
      }

      .noted-i{
        position: absolute;
        color:#fff;
        bottom:10px;
        right:.2rem;
      }
      .noted-add{
        font-family: "Hiragino Sans GB", "STHeiti", Helvetica, "Microsoft Yahei", 微软雅黑, Arial, "Lucida Grande", sans-serif;
        color:#fff;
        font-size:20px;
        position: absolute;
        background-color: rgba(0 ,0,0,0.3);
        top:20%;
        left:50%;
        -webkit-transform:translatex(-50%);
        transform:translatex(-50%);
      }
      .noted-adds{
        color: #fff;
        font-size: 50px;
        position: absolute;
        background-color: rgba(0 ,0,0,0.3);
        padding: 20px 40px;
        top:60%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
      }
    }
    .task-show{
      padding: 20px 20px 0;
      border:1px solid #f7f7f9;
      width: 100% !important;
      height: 250px;
      position: relative;
      background-color: #fff;
      overflow-y: scroll;
      .more{
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
  }
  .team_note{

    .nav{
      border-left: 3px #0CB88E solid;
      height: 40px;
      width: 100%;
      text-align: left;
      line-height: 40px;
      padding-left: 20px;
      font-size: 20px;
    }
    .noted{
      min-width:200px;
      width: 200px;
      height: 220px;
      display: inline-block;
      position: relative;
      margin-bottom: 2px;
      padding: .1rem;
      cursor:pointer;
      &:hover{
        opacity:1;
      }
      &:hover .noted-title{
        background-color: rgba(0 ,0,0,0.3);
        background-color: #0B6E48;
      }

      img{
        width: 100%;
        height: 100%;

      }
      .img{
        width: 80px;
        height: 80px;
        border-radius: 40px;
        position: absolute;
        z-index: 10;
        background-color: rgba(0 ,0,0,0.3);
        top:5%;
        left:50%;
        -webkit-transform:translatex(-50%);
        transform:translatex(-50%);
        background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493010993473&di=caeac3cffe012e8b55f68deb3faa5c4e&imgtype=0&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201212%2F28%2F135109w3brbtcbkbk3tlvw.jpg) no-repeat;
        background-size: 100% 100%;
      }
      .noted-title{
        font-family: "Hiragino Sans GB", "STHeiti", Helvetica, "Microsoft Yahei", 微软雅黑, Arial, "Lucida Grande", sans-serif;
        color:#fff;
        font-size:.2rem;
        width: 80%;
        padding: 0;
        position: absolute;
        z-index: 10;
        background-color: rgba(0 ,0,0,0.3);
        top:50%;
        left:50%;
        text-align: center;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);

      }
      .yan{
        position: absolute;
        z-index: 10;
        background-color: rgba(0 ,0,0,0.3);
        bottom:50px;
        right:.2rem;
        color: #f0efee;
        -webkit-transform:translatex(-50%);
        transform:translate(-50%);
        &:hover ~ .note-content{
          display: block;
          position: absolute;
          width: 100%;
          height: 100%;
          padding: 20px;
          z-index: 11;
          top:50%;
          left:50%;
          -webkit-transform:translate(-50%,-50%);
          transform:translate(-50%,-50%);
        }
      }
      .note-content{
        display: none;
        transition: all 1s linear;
        background-color: rgba(255,255,255,0.8);
        color: #080808;
      }

      .noted-i{
        position: absolute;
        color:#fff;
        bottom:10px;
        right:.2rem;
      }
      .noted-add{
        font-family: "Hiragino Sans GB", "STHeiti", Helvetica, "Microsoft Yahei", 微软雅黑, Arial, "Lucida Grande", sans-serif;
        color:#fff;
        font-size:20px;
        position: absolute;
        background-color: rgba(0 ,0,0,0.3);
        top:20%;
        left:50%;
        -webkit-transform:translatex(-50%);
        transform:translatex(-50%);
      }
      .noted-adds{
        color: #fff;
        font-size: 50px;
        position: absolute;
        background-color: rgba(0 ,0,0,0.3);
        padding: 20px 40px;
        top:60%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
      }
    }
  }
}
